![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
Download the latest release or
npm install jodit
or
yarn add jodit
ES5 Version
<link type="text/css" rel="stylesheet" href="build/jodit.min.css" />
<script type="text/javascript" src="build/jodit.min.js"></script>
ES2018 Version (if your users use only modern browsers)
<link type="text/css" rel="stylesheet" href="build/jodit.es2018.min.css" />
<script type="text/javascript" src="build/jodit.es2018.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/jodit@3.24.2/build/jodit.es2018.min.css"
/>
<script src="https://unpkg.com/jodit@3.24.2/build/jodit.es2018.min.js"></script>
And some <textarea>
element
<textarea id="editor" name="editor"></textarea>
After this, you can init Jodit plugin
var editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
or
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
with jQuery
$('textarea').each(function () {
var editor = Jodit.make(this);
editor.value = '<p>start</p>';
});
git clone https://github.com/xdan/jodit.git
cd jodit
npm install
Run webpack Hot Reload server:
npm start
Demo will be available here
http://localhost:2000/
Build min files:
npm run build
Build without some plugins:
webpack --progress --mode production --env es=es2018 --env uglify=true --env excludePlugins="about,source,bold,image,xpath,stat,class-span,color,clean-html,file,focus,enter,backspace,media,preview,pint,redo-undo,resize-cells,search,spellcheck,table"
Build without some languages:
webpack --progress --mode production --env es=es2018 --env uglify=true --env excludeLanguages="ru,ar,cs_cz,de,es,fa,fr,he,hu,id,it,ja,ko,nl,pl,pt_br,ru,tr,zh_cn,zh_tw"
Run tests:
karma start --browsers ChromeHeadless,IE,Firefox karma.conf.js
or
npm test
or
yarn test
For checking tests in browser, open URL:
http://localhost:2000/test/test.html
For testing FileBrowser and Uploader modules, need install PHP Connector
composer create-project --no-dev jodit/connector
Run test PHP server
php -S localhost:8181 -t ./
and set options for Jodit:
var editor = Jodit.make('#editor', {
uploader: {
url: 'http://localhost:8181/index-test.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'http://localhost:8181/index-test.php'
}
}
});
Jodit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.s.insertHTMl('Text');
});
};
var editor = Jodit.make('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
}
}
]
});
or
var editor = Jodit.make('.someselector', {
buttons: ['bold', 'insertDate'],
controls: {
insertDate: {
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
}
}
}
});
button with plugin
Jodit.plugins.add('insertText', function (editor) {
editor.events.on('someEvent', function (text) {
editor.s.insertHTMl('Hello ' + text);
});
});
// or
Jodit.plugins.add('textLength', {
init(editor) {
const div = editor.create.div('jodit_div');
editor.container.appendChild(div);
editor.events.on('change.textLength', () => {
div.innerText = editor.value.length;
});
},
destruct(editor) {
editor.events.off('change.textLength');
}
});
// or use class
Jodit.plugins.add(
'textLength',
class textLength {
init(editor) {
const div = editor.create.div('jodit_div');
editor.container.appendChild(div);
editor.events.on('change.textLength', () => {
div.innerText = editor.value.length;
});
}
destruct(editor) {
editor.events.off('change.textLength');
}
}
);
var editor = Jodit.make('.someselector', {
buttons: ['bold', 'insertText'],
controls: {
insertText: {
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.events.fire('someEvent', 'world!!!');
}
}
}
});
This project is maintained by a community of developers. Contributions are welcome and appreciated. You can find Jodit on GitHub; feel free to start an issue or create a pull requests: https://github.com/xdan/jodit
MIT
FAQs
Jodit is an awesome and useful wysiwyg editor with filebrowser
The npm package jodit receives a total of 399 weekly downloads. As such, jodit popularity was classified as not popular.
We found that jodit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.